<script setup lang='ts'>
import { Expand, Fold, User } from "@element-plus/icons-vue"
import Setting from "../Settings/index.vue"
import Notify from "../Notify/index.vue"
import Screenfull from "../Screenfull/index.vue"
import { useAppStore } from "@/store/modules/app"
import { type RouteLocationMatched, useRoute, useRouter } from "vue-router"
import { ref } from "vue"

const appStore = useAppStore()

//侧边栏展开收缩
const isCollapse = ref(false)
const router = useRouter();
/** 定义响应式数据 breadcrumbs，用于存储面包屑导航信息 */
const breadcrumbs = ref<RouteLocationMatched[]>([])
// 侧边栏点击
const toggleClick = () => {
    appStore.toggleSidebar()
    isCollapse.value = !isCollapse.value
}
const handleCommand = (command: string | number | object) => {
    console.log(command);
    localStorage.removeItem("token")
    localStorage.removeItem("permission")
    router.push("/login")
}
</script>

<template>
    <div class="navigation-bar">
        <!-- 侧边栏展开收缩 -->
        <div @click="toggleClick" class="toggle-btn">
            <el-icon :size="20" class="icon">
                <Fold v-if="!isCollapse" />
                <Expand v-else />
            </el-icon>
        </div>
        <!-- 面包屑 -->
        <!-- <el-breadcrumb>
            <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
                <span v-if="item.redirect === 'noRedirect' || index === breadcrumbs.length - 1" class="no-redirect">
                    {{ item.meta.title }}
                </span>
                <a v-else>
                    {{ item.meta.title }}
                </a>
            </el-breadcrumb-item>
        </el-breadcrumb> -->
        <el-breadcrumb>
            <el-breadcrumb-item>
                <a href="/">门诊</a>
            </el-breadcrumb-item>
            <el-breadcrumb-item>问诊</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 设置 -->
        <div class="massage">
            <Setting />
        </div>

        <div class="padding-left">
            <Screenfull />
        </div>

        <div class="padding-left">
            <Notify />
        </div>

        <el-dropdown @command="handleCommand">
            <div class="padding-left">
                <div class="img">
                    <el-icon :size="20">
                        <User />
                    </el-icon>
                </div>
                admin，欢迎进入系统！
            </div>

            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>

    </div>
</template>

<style lang='scss' scoped>
.navigation-bar {
    padding: 0 20px;
    min-height: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;

    .el-popover.el-popper {
        min-width: 115px !important;
    }

    .toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-right: 10px;
    }

    .massage {
        margin-left: auto;
    }

    .padding-left {
        display: flex;
        margin-left: 20px;
        align-items: center;
        font-size: 16px;

        .img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;

            .el-icon {
                color: #fff;
            }
        }
    }
}
</style>
